<!-- author: lizq -->
<!-- date: 2023-03-01 15:09:44 -->
<!-- description: table - 搜索区 -->
<!-- eslint-disable vue/no-mutating-props -->
<template>
 
  <div ref="searchDiv" class="search" :style="{ height: !isCollapse ? 'auto' : searchHeight }">
    <div class="left">
      <!-- form -->
      <el-form ref="searchForm" :model="formData" :inline="true" :label-width="labelWidth" @submit.enter.prevent>
        <!-- form-item -->
        <el-form-item v-for="(item, i) in formDataInfo" :key="i" :label="item.label" :prop="item.prop">
          <!-- input -->
          <el-input
            v-if="item.type == 'input'"
            v-model="formData[item.prop]"
            :placeholder="item.placeholder ? item.placeholder : '请输入'"
            clearable
            @keyup.enter="searchOperation('handleQuery')"
          />
          <!-- select -->
          <el-select
            v-else-if="item.type == 'select'"
            v-model="formData[item.prop]"
            placeholder="请选择"
            :filterable="item.filterable"
            clearable
            @keyup.enter="searchOperation('handleQuery')"
          >
            <template v-if="item.dict">
              <el-option v-for="a in $dict[item.dict]" :key="a.value" :label="a.label" :value="a.value" />
            </template>
            <template v-else-if="item.options">
              <el-option v-for="a in item.options" :key="a.value" :label="a.label" :value="a.value" />
            </template>
          </el-select>
          <!-- date -->
          <el-date-picker
            v-else-if="item.type == 'date'"
            v-model="formData[item.prop]"
            :type="item.dateInfo.type"
            :format="item.dateInfo.format ? item.dateInfo.format : 'YYYY-MM-DD'"
            :value-format="item.dateInfo.vFormat ? item.dateInfo.vFormat : 'YYYY-MM-DD'"
            :unlink-panels="item.dateInfo.unlink == undefined ? false : item.dateInfo.unlink"
            range-separator="-"
            start-placeholder="开始"
            end-placeholder="结束"
            placeholder="请选择"
            :shortcuts="item.dateInfo.shortcuts"
          />
          <!-- slot -->
          <slot v-else-if="item.type == 'slot'" :name="item.prop"></slot>
        </el-form-item>
      </el-form>
      <div class="division"></div>
    </div>
    <!-- 操作-按钮 -->
    <div class="right">
      <el-button type="primary" icon="search" @click="searchOperation('handleQuery')">搜索</el-button>
      <el-button icon="refreshRight" class="ash" @click="searchOperation('resetQuery')">重置</el-button>
      <slot name="right"></slot>
    </div>
    <!-- 伸缩-按钮 -->
    <div v-if="isCollapseShow" class="moreSearch" @click="moreSearchClick">
      <el-icon v-if="!isCollapse" color="#ffffff">
        <DArrowLeft />
      </el-icon>
      <el-icon v-else color="#ffffff">
        <DArrowRight />
      </el-icon>
      <span>{{ isCollapse ? "展开" : "收起" }}</span>
    </div>
  </div>
</template>

<script setup>
import useAppStore from "@/store/modules/app";
const appStore = useAppStore();

const $props = defineProps({
  formData: {
    type: Object,
    default: () => {}
  },
  formDataInfo: {
    type: Array,
    default: () => []
  },
  labelWidth: {
    type: String,
    default: "80px"
  }
});
const $emit = defineEmits(["callBackData"]);

//初始化-字典数据
const { proxy } = getCurrentInstance();
const dictList = ref([]);
$props.formDataInfo.forEach((item) => {
  // console.log(item, "ssssss");
  if (item.dict) {
    dictList.value.push(item.dict);
  }
});

let $dict = ref([]);
if (dictList.value.length > 0) {
  $dict = proxy.useDict(dictList.value);
}

//判断伸缩标识
const isCollapse = ref(true);
const isCollapseShow = ref(false);

const searchDiv = ref(null);
const searchForm = ref(null);
const searchHeight = ref("53px");

onMounted(() => {
  let newSearchHeight = searchForm.value.$el.clientHeight;
  nextTick(() => {});
  if (newSearchHeight <= 112 && newSearchHeight > 56) {
    searchHeight.value = "106px";
  } else if (newSearchHeight <= 56) {
    searchHeight.value = "53px";
  } else {
    searchHeight.value = "106px";
  }

  if (newSearchHeight > 112) {
    isCollapseShow.value = true;
  }
  nextTick(() => {
    let searchHeight = searchDiv.value && searchDiv.value.clientHeight ? searchDiv.value.clientHeight : 52;
    appStore.setFormSearchHeight(isCollapseShow.value ? searchHeight : searchHeight - 20);
  });
});
// keepAlive监听
onActivated(() => {
  nextTick(() => {
    let searchHeight = searchDiv.value && searchDiv.value.clientHeight ? searchDiv.value.clientHeight : 52;
    appStore.setFormSearchHeight(isCollapseShow.value ? searchHeight : searchHeight - 20);
  });
});

//搜索区伸缩
const moreSearchClick = () => {
  isCollapse.value = !isCollapse.value;
  nextTick(() => {
    let searchHeight = searchDiv.value.clientHeight;
    document.documentElement.style.setProperty("--el-search-heigth", searchHeight + "px");
    appStore.setFormSearchHeight(isCollapseShow.value ? searchHeight : searchHeight - 20);
  });
};

//搜索栏操作
const searchOperation = (val) => {
    // console.log($props.formData, "searchForm");
    
  if (val ==  "resetQuery") {
    //重置传参：Array<FormItemProp>
    let arr = Object.keys($props.formData).map((key) => key);
    proxy.resetForm("searchForm");
    searchForm.value.resetFields(arr);
  
  }
  $emit("callBackData", val);
};
</script>

<style scoped lang="scss">
.search {
  height: auto;
  // border-bottom: 1px solid #e1e5ee;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  // margin-bottom: 20px;
  .left {
    flex: 1;
    height: 100%;
    border-right: 1px solid #e1e5ee;
    // padding-right: 20px;
    overflow: hidden;
    .division {
      width: 20px;
      height: 20px;
      position: absolute;
      right: 182px;
      bottom: 0;
      background-color: #ffffff;
    }
    :deep(.el-form) {
      height: auto;
    }
  }
  .right {
    width: 192px;
    height: 100%;
    padding-bottom: 20px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
  .moreSearch {
    width: 100px;
    height: 0;
    border-top: 20px solid $G-themecolor;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    position: absolute;
    left: calc(50% - 50px);
    bottom: -23px;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    box-sizing: border-box;
    padding-bottom: 2px;
    cursor: pointer;
    span {
      font-size: 14px;
      margin-left: 5px;
      color: #fff;
    }
    .el-icon {
      -ms-transform: rotate(90deg);
      /* IE 9 */
      -webkit-transform: rotate(90deg);
      /* Safari and Chrome */
      transform: rotate(90deg);
    }
  }
}
:deep(.el-form-item__content) {
  width: 214px;
}
//input
:deep(.el-form-item) {
  margin-bottom: 20px !important;
}
</style>
